<template>

<el-container>
    <el-header class="order-header">
        <div class="order-buttons">
            <el-button type="info">全部订单</el-button>
            <el-button type="info" >待付款</el-button>
            <el-button type="info" >待收货</el-button>
            <el-button type="info" >待评价</el-button>
        </div>
        <div class="order-controls">
            <el-input
                placeholder="订单信息"
                v-model="orderName"
                clearable
                class="order-input">
            </el-input>
            <el-button icon="el-icon-search" circle class="order-button"></el-button>
        </div>
    </el-header>
  <el-main style="line-height:50px">
    <el-table
        :data="tableData1"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
        <el-table-column prop="picture" label="商品图片" align="center">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.picture" :preview-src-list="[scope.row.picture]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
        prop="info"
        label="商品详情"
        width="180"
        align="center">
        </el-table-column>
        <el-table-column
        prop="name"
        label="收货人"
        align="center"
        width="180">
        </el-table-column>
        <el-table-column
        prop="money"
        align="center"
        label="商品金额">
        </el-table-column>
        <el-table-column
        prop="status"
        align="center"
        label="订单状态">
          <template slot-scope="scope">
            <el-result  :icon="scope.row.status">
              
            </el-result>
            
          </template>
          
        </el-table-column>
        <el-table-column
        prop="status"
        align="center"
        label="我的评价">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.score"
              :disabled="scope.row.isAppraise || scope.row.status==='error'"
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </template>
          
        </el-table-column>
        <el-table-column
        prop="operation"
        align="center"
        label="操作">
          <template slot-scope="scope">
              <el-button v-if="!scope.row.isAppraise" type="warning" :disabled="scope.row.status==='error' ">待评价</el-button>
              <el-button v-if="scope.row.isAppraise" type="warning" disabled>已评价</el-button>
              <el-button type="danger" >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
  </el-main>
  <el-footer>
    <div class="block container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400" class="demo">
    </el-pagination>
  </div>
  </el-footer>
</el-container>
  
</template>

<script>
export default {
    name:'orderTable',
    data() {
      return {
        orderName:'',
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        rowStyle: {
            height:50,
        },
        tableData1: [{
            id: 1,
            picture: require('@/assets/list/image.png'),
            info: '智能手机',
            name: '王小虎',
            money: '1500',
            status:'success',
            isAppraise:true,
            score: 1.8,
            operation:'删除'
        }, {
            id: 2,
            picture: require('@/assets/list/image.png'),
            info: '智能手机',
            name: '王小虎',
            money: '1500',
            status:'success',
            isAppraise:false,
            score: 0,
            operation:'删除'
        }, {
            id: 3,
            picture: require('@/assets/list/image.png'),
            info: '智能手机',
            name: '王小虎',
            money: '1500',
            status:'error',
            isAppraise:false,
            score: 0,
            operation:'删除'
        }, {
            id: 4,
            picture: require('@/assets/list/image.png'),
            info: '智能手机',
            name: '王小虎',
            money: '1500',
            status:'success',
            isAppraise:true,
            score: 4,
            operation:'删除'
        }]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    
}
</script>

<style scoped>
    .container {
      display: flex;
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
    }
    .order-header {
    display: flex;
    justify-content: space-between;
    }

    .order-buttons {
    display: flex;
    }

    .order-controls {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    }

    .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
   /deep/ .el-result{
    height:50px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    width:20px;
   }
   /deep/ .cell {
      display: flex;
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
    }
   /deep/ .icon-success{
      height:35px;
      width:35px;
   }
  /deep/ .icon-error{
      height:35px;
      width:35px;
   }
  
</style>